<template>
  <div class="whitespace-nowrap">
    <BaseCard title="数据统计" subTitle="系统统计数据实时展示">
      <div class="statistic-box">
        <div class="statistic-box_item">
          <div class="statistic-top">
            <el-image class="min-w-[18px] h-[18px]">
              <template #error>
                <div class="image-slot">
                  <img
                    src="@/assets/modules/icons/001.svg"
                    alt=""
                    class="min-w-[18px] h-[18px]"
                  />
                </div>
              </template>
            </el-image>
            <span class="statistic-top_title">节点统计</span>
            <div
              class="cursor-pointer statistic-top_operation"
              @click="() => $router.push('/nodes/admin')"
            >
              管理节点
            </div>
          </div>
          <div class="statistic-content">
            <div class="statistic-content_item">
              <div class="count">{{ state.nodeData?.total_num || '-' }}</div>
              <div class="text">节点总数</div>
            </div>
            <div class="statistic-content_item">
              <div class="count">{{ state.nodeData?.online_num || '-' }}</div>
              <div class="text">在线节点</div>
            </div>
            <div class="statistic-content_item">
              <div class="count">{{ state.nodeData?.offline_num || '-' }}</div>
              <div class="text">离线节点</div>
            </div>
          </div>
        </div>
        <div class="statistic-box_item">
          <div class="statistic-top pl-[57px]">
            <el-image class="min-w-[18px] h-[18px]">
              <template #error>
                <div class="image-slot">
                  <img
                    src="@/assets/modules/icons/002.svg"
                    alt=""
                    class="min-w-[18px] h-[18px]"
                  />
                </div>
              </template>
            </el-image>
            <span class="statistic-top_title">TCC统计</span>
          </div>
          <div class="statistic-content">
            <div class="statistic-content_item">
              <div class="count">{{ state.tccData?.total_num || '-' }}</div>
              <div class="text">TCC安装</div>
            </div>
            <div class="statistic-content_item">
              <div class="count">{{ state.tccData?.enable_num || '-' }}</div>
              <div class="text">启用中数量</div>
            </div>
            <div class="statistic-content_item">
              <div class="count">{{ state.tccData?.disable_num || '-' }}</div>
              <div class="text">禁用中数量</div>
            </div>
          </div>
        </div>
        <div class="statistic-box_item">
          <div class="statistic-top pl-[57px]">
            <el-image class="min-w-[18px] h-[18px]">
              <template #error>
                <div class="image-slot">
                  <img
                    src="@/assets/modules/icons/003.svg"
                    alt=""
                    class="min-w-[18px] h-[18px]"
                  />
                </div>
              </template>
            </el-image>
            <span class="statistic-top_title">打包申请统计</span>
            <div
              class="cursor-pointer statistic-top_operation"
              @click="() => $router.push('/packs/apply')"
            >
              查看打包申请
            </div>
          </div>
          <div class="border-none statistic-content">
            <div class="statistic-content_item">
              <div class="count">
                {{ formatNumber(+state.packData.total_num) }}
              </div>
              <div class="text">打包申请总数量</div>
            </div>
            <div class="statistic-content_item">
              <div class="count">
                {{ formatNumber(+state.packData.fail_num) }}
              </div>
              <div class="text">打包失败数量</div>
            </div>
            <div class="flex-1"></div>
          </div>
        </div>
      </div>
    </BaseCard>
    <BaseCard
      title="趋势分析"
      subTitle="数据分析汇总"
      :showBody="false"
      class="mt-4"
    />
    <BaseCard class="mt-4">
      <OverviewChart />
    </BaseCard>
  </div>
</template>

<script setup lang="ts">
import BaseCard from '@/components/base-card'
import { formatNumber } from '@/utils'
import { OverviewChart } from '@/components/overview'
import type {
  INodeStatistics,
  IPackStatistics,
  ITccStatistics
} from '@/apis/model/statistics'

interface IState {
  nodeData: INodeStatistics
  tccData: ITccStatistics
  packData: IPackStatistics
  loading: boolean
}
const state = reactive<IState>({
  loading: false,
  nodeData: {} as INodeStatistics,
  packData: {} as IPackStatistics,
  tccData: {} as ITccStatistics
})
/** 获取概览节点统计 */
const getNodeOverview = () => {
  state.loading = true
  NodeStatistics()
    .then((res: any) => {
      state.nodeData = res || ({} as INodeStatistics)
    })
    .finally(() => {
      state.loading = false
    })
}
/** 获取概览节点统计 */
const getTccOverview = () => {
  state.loading = true
  TccStatistics()
    .then((res: any) => {
      state.tccData = res || ({} as INodeStatistics)
    })
    .finally(() => {
      state.loading = false
    })
}
/** 获取概览节点统计 */
const getPackOverview = () => {
  state.loading = true
  PackStatistics()
    .then((res: any) => {
      state.packData = res || ({} as IPackStatistics)
    })
    .finally(() => {
      state.loading = false
    })
}
onMounted(() => {
  getNodeOverview()
  getTccOverview()
  getPackOverview()
})
</script>

<style lang="scss" scoped>
.statistic-box {
  width: 100%;
  height: auto;
  display: flex;

  &_item {
    flex: 1;
    .statistic-top {
      @apply flex items-center h-[24px] w-full;
      &_title {
        @apply ml-[10px] mr-4 text-[14px] font-semibold;
      }
      &_operation {
        @apply min-w-[64px] h-6 py-[6px] px-3 rounded-[16px] text-[12px] text-center leading-3 text-[#376AF7];
        border: 1px solid #376af7;
      }
    }
    .statistic-content {
      border-right: 1px dashed #d8d7d7;
      @apply flex items-center flex-1 w-full mt-[35px];
      &_item {
        flex: auto;
        text-align: center;
        color: #333333;
        letter-spacing: 0;
        .count {
          // font-family: PingFangSC-Medium;
          font-size: 20px;
          font-weight: 600;
        }
        .text {
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
